<template>
    <div>
        <h1>TODO头</h1>
        <input type="text" @keydown.enter="addItem" v-model="text"/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
interface TodoHeadData{
    text:string
}
//选项式API为了更好支持ts用defineComponent函数定义组件
//否则ts数据验证可能无法验证
export default defineComponent({
    data(){
        let todoheaddata:TodoHeadData={
            text:""
        }
        return todoheaddata;
    },
    // emits:['addItem'],
    emits:{
        //参数t是 this.$emit()触发事件的时候传递参数值
        addItem(t:string){
            if(t.length>10) return false;
            return true;
            // return true;//事件校验 如果校验通过返回true 否则false
        }
    },
    methods:{
        //this.text
        addItem(e:Event){
            this.$emit("addItem",this.text);
            this.text=""
        }
    }
});
</script>

<style scoped>

</style>